<template>
  <div class="control-item">
    <div class="control-header">
      <span>全站配色</span>
      <span class="reset" @click="handleReset">重置</span>
    </div>
    <div class="control-body">
      <div class="color-list">
        <div
          class="color-item"
          :class="{ default: index == 0, activeColor: index == activeItem }"
          v-for="(item, index) in colorList"
          :key="index"
          :style="{ backgroundColor: item }"
          @click="handleThemeItem(item, index)"
        >
          <span v-show="index == 0">默认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "themeControl",
  props: {
    params: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      colorList: [
        "",
        "#FD478D",
        "#FD7221",
        "#FCBE40",
        "#42BE56",
        "#1FC2AE",
        "#3285FC",
        "#BFA073",
        "#292929",
      ],
      activeItem: 0,
    };
  },
  watch: {},
  computed: {
    themeConfig() {
      return this.$diyObser.store.currentPage.theme;
    },
  },
  mounted() {
    if (this.themeConfig.color) {
      let index = this.colorList.findIndex((d) => {
        return d == this.themeConfig.color;
      });
      this.activeItem = index;
    }
  },
  methods: {
    // 点击配色
    handleThemeItem(item, index) {
      this.activeItem = index;
      let page = this.$diyObser.store.currentPage;
      page.theme.color = item;
      page.theme.time = new Date().getTime();
      this.$diyObser.mutations.setThemeConfig({
        color: item,
        time: new Date().getTime(),
      });
      this.$eventHub.$emit("setThemeColor", {
        color: item,
      });
      console.log(this.$diyObser.store.currentPage);
    },
    // 重置
    handleReset() {
      let page = this.$diyObser.store.currentPage;
      page.theme.color = "";
      console.log(this.$diyObser.store.currentPage);
    },
  },
};
</script>

<style lang="scss" scoped>
.control-item {
  width: 228px;
  margin: 0 auto;
  text-align: center;
  .control-header {
    width: 100%;
    padding: 24px 0 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
    .reset {
      color: #929292;
      cursor: pointer;
      user-select: none;
    }
  }
  .control-body {
    width: 100%;
    .color-list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -3px;
      .color-item {
        width: 34px;
        height: 34px;
        background: #fd478d;
        border-radius: 4px;
        margin: 0 5px 5px 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .default {
        border: 1px solid #f6f7f9;
        background: #ffffff;
        span {
          font-size: 12px;
          color: #000000;
          opacity: 0.45;
        }
      }
      .activeColor {
        border: 2px solid #1890fc;
      }
    }
  }
}
</style>
